{% liquid
  assign setting = section.settings
  assign note = setting.note
  assign subscribe_button_label = setting.subscribe_button_label
  assign subscribe_tag = setting.subscribe_tag
  assign subscribe_api = setting.subscribe_api
  assign submission_color = setting.submission_color
  assign submission_style = setting.submission_style
  assign text_color = setting.text_color
  assign enable_gdpr_policy_checkbox = setting.enable_gdpr_policy_checkbox
  assign split_button_and_input = setting.split_button_and_input
  assign form_id = 'subscribe-banner-form' | append: section.id
  assign privacy_policy_id = 'privacy_policy' | append: section.id

%}
{%- liquid 
  assign api = subscribe_api

  case text_color
    when 'white'
      assign input_text = 'input-text-white'
      assign checkbox_color = 'checkbox-white'
    when 'black'
      assign input_text = 'input-text-black'
      assign checkbox_color = 'checkbox-black'

  endcase
%} 


{% if api %}
  <div class="text-start form-wrapper">
    {% form 'customer', id: form_id, data-action: api, data-customize: true, class: 'as-validate-form as-subscribe-banner-form mt-4 mt-md-5', novalidate: 'novalidate', autocomplete: "off" %}
      <input type="hidden" name="tags" value="{{ subscribe_tag }}">
        <div class="position-relative">
          <div class="position-relative form-pristine">
            <input
              type="email"
              {% if api != blank %}
              name="email"
              {% else %}
              name="contact[email]"
              {% endif %}
              data-pristine-required-message="{{ 'general.subscribe.email_error_message' | t }}"
              data-pristine-email-message="{{ 'general.subscribe.email_error_message' | t }}" 
              class="form-control input-pristine  as-email-input {{ input_text }} {% if submission_style == 'button' and split_button_and_input %}as-split input-padding-button{% endif %}" 
              placeholder="{{ 'general.subscribe.placeholder' | t }}" required>

            <div class="position-absolute top-0 end-0 p-1 button-wrapper as-submit-btn-wrapper {% if submission_style == 'button' and split_button_and_input %}d-none d-md-block{% endif %}">
              <button type="submit" class="w-100 btn btn-sm btn-{{ submission_color }}  border-0 py-2 position-relative submit-btn as-submit-btn" {% if submission_style == 'icon' %}style="font-size: 0;"{% endif %}>
                {% if submission_style == 'button' %}
                  {% if subscribe_button_label %}
                    <span class="btn-content">
                      {{ subscribe_button_label }}
                    </span>
                  {% endif %}
                {% else %}
                  <span class="btn-content icon-wrap-md">
                    {% render 'icon-subscribe-button' %}
                  </span>
                {% endif %}
                <span class="absolute-center align-items-center justify-content-center btn-loading">
                  <span class="spinner-border mr-2 add-to-cart-loading" role="status"></span>
                </span>
              </button>
            </div>
          </div>
          {% if enable_gdpr_policy_checkbox %}
            <div class="mt-2 mt-md-3 form-pristine position-relative">
              <div class="form-check input-pristine ">
                <input type="checkbox" data-pristine-required-message="{{ 'general.subscribe.policy_error_message' | t }}" id="{{ privacy_policy_id }}" name="privacy_policy" value="privacy_policy" class="form-check-input {{ checkbox_color }}" required>
                <label for="{{ privacy_policy_id }}" class="form-check-label fs-footnote richtext-with-link">{{ 'general.subscribe.accept_policy_html' | t }}</label><br>  
              </div>
            </div>
          {% endif %}
          {% if submission_style == 'button' and split_button_and_input %}
            <div class="mt-3 mt-md-2 d-md-none">
              <button type="submit" class="w-100 btn btn-{{ submission_color }}  border-0 position-relative split-submit-btn submit-btn as-submit-btn">
                <span class="btn-content">
                  {{ subscribe_button_label }}
                </span>
                <span class="absolute-center align-items-center justify-content-center btn-loading">
                  <span class="spinner-border mr-2 add-to-cart-loading" role="status"></span>
                </span>
              </button>
            </div>
          {% endif %}
        </div>
        {%- comment -%} {% if subscribe_button_label %}
        {% endif %} {%- endcomment -%}
      {% if note %}
        {%- liquid
          assign show_max_margin = true 
          if submission_style == 'button' and split_button_and_input
            assign show_max_margin = false
          endif
        -%}
        <div class="{% if show_max_margin and enable_gdpr_policy_checkbox == false %}mt-3{% else %}mt-2{% endif %} mt-md-2 fs-footnote gray-600 no-last-margin">{{ note }}</div>
      {% endif %}
      <div class="text-success fs-footnote as-success-tips d-none">{{ 'general.subscribe.success_message' | t }}</div>
      <div class="text-danger fs-footnote as-error-tips d-none">{{ 'general.subscribe.error_message' | t }}</div>
    {% endform %}
  </div>
{% endif %}